<template>
    <span>用户信息</span>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column label="选择" align="center" width="65">
            <template v-slot="scope">
                <el-radio :label="scope.$index" v-model="radio"
                          dblclick="toDetails()" click="getCurrentRow(scope.row)"></el-radio>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名" width="100" />
        <el-table-column prop="password" label="密码" width="100"/>
        <el-table-column prop="sex" label="性别" width="60"/>
        <el-table-column prop="addr" label="地址" width="150"/>
        <el-table-column prop="tel" label="电话" width="200"/>
        <el-table-column prop="email" label="邮箱" width="250"/>
        <el-table-column prop="hobby" label="爱好" width="60"/>
    </el-table>
    <el-button type="primary" @click="search">搜索</el-button>
</template>

<script>

    import { ElMessageBox } from 'element-plus'
    import axios from 'axios'

export default {
    name: 'UserInfo',
    data(){
        return  {
            templateSelection: {},
            radio: '',
            tableData:[]
        }
    },
    methods: {
        search() {
            axios.get('http://localhost:8081/getUserInfoList', {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8',//设置请求头请求格式为JSON
                },
            }).then(
                (res) => {
                    if (res.data.code == '200') {
                        console.log("用户数据", res.data.data);
                        this.tableData = res.data.data;
                    }
                }
            )
        },

        getCurrentRow(row){
            // 获取选中数据 row表示选中这一行的数据，可以从里面提取所需要的值
            this.templateSelection = row;
        },

        toDetails(){
            this.$router.push({
                path:'/Details',
                query: {
                    queryForm: JSON.stringify(this.templateSelection),
                }
            })
        }

    }
}
</script>
